<template>
  <div class="single-version-page">
    <search-form
      ref="search-form"
      :report-type="formData.reportType"
      :exporting-top="exportingTop"
      :exporting-bottom="exportingBottom"
      @submit="onSearchReport"
      @export="res => { onExportGrossFile(res, 1, '毛利额单品版报表', initSearchData(getSearchData()), 'single') }"
      @exportBottom="res => { onExportGrossFile(res, 2, '毛利额单品版底表', initSearchData(getSearchData()), 'single') }"
      @uploadBlackFile="uploadBlackFileTrigger"
    />
    <table-component :columns="singleVersionColumn" :data="tableData" :loading="loading" />
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="pageForm.current"
        :page-sizes="pageForm.pageSizes"
        :page-size="pageForm.size"
        layout="total, slot, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <down-dialog
      :show="showDownDialog"
      @handleClose="handleClose"
    />
    <import-file
      ref="importFileRef"
      :visible="importFileDta.visible"
      @close="hanldImportFileColse"
      @downLoadTemplateFile="downLoadTemplateFile"
      @firstImport="firstImport"
      @isImport="isImport"
      @getErrorPage="getErrorPage"
      @downLoadErrorFileData="downLoadErrorFileData"
    >
      <div slot="tips" class="tips">
        <el-link class="tips-text" type="danger" :underline="false">注意：每次导入新的黑名单时，系统会自动删除历史黑名单，如需获取历史黑名单，请在点击右边的按钮进行下载。当前菜单导入的黑名单，适用于“单品版、城市版、门店版”</el-link>
        <el-link class="tips-button" type="primary" :underline="false" @click="downloadExistBlackList">下载现有黑名单</el-link>
      </div>
    </import-file>
  </div>
</template>
<script>
import SearchForm from './components/search-form';
import DownDialog from './components/down-dialog';
import ImportFile from '@/components/common/ImportFile';
import { singleVersionColumn } from './config';
import TableComponent from './components/table-component.vue';
import { getSingleGross } from '@/api/grossProfitApi';
import mixin from './mixin';

export default {
  name: 'KAliveSingleVersion',
  components: {
    SearchForm,
    TableComponent,
    DownDialog,
    ImportFile
  },
  mixins: [mixin],
  data() {
    return {
      singleVersionColumn,
      loading: false,
      tableData: [],
      pageForm: {
        total: 0,
        current: 1,
        size: 10,
        pageSizes: [10, 20, 30, 50]
      },
      formData: {
        reportType: 'GROSS_COMMODITY'
      }
    };
  },
  methods: {
    onSearchReport(data) {
      const searchData = data || this.getSearchData();
      const params = this.initSearchData(searchData);
      this.getList(params);
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.onSearchReport();
    },
    handleCurrentChange(val) {
      this.pageForm.current = val;
      this.onSearchReport();
    },
    getList(data) {
      this.loading = true;
      getSingleGross(data).then(res => {
        if (res.resultCode === '0000') {
          this.pageForm.total = res.total > data.eleCount ? data.eleCount : res.total;
          this.tableData = res.data;
        } else {
          this.tableData = [];
          this.$message.error(res.resultMessage || '请求列表异常，请稍后操作');
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    getSearchData() {
      return this.$refs['search-form'].formData;
    },
    initSearchData(data) {
      const {
        businessCategories = [],
        regions = [],
        cities = [],
        stores = [],
        sortType = 1,
        eleCount = 20,
        sortTarget = 1,
        goodsCategoriesFour = [],
        goodsCategoriesOne = [],
        goodsCategoriesThree = [],
        goodsCategoriesTwo = [],
        dateEnd = '',
        dateBegin = ''
      } = data;
      return {
        current: this.pageForm.current,
        size: this.pageForm.size,
        businessCategories,
        regions,
        cities,
        stores,
        sortType,
        eleCount,
        sortTarget,
        goodsCategoriesFour,
        goodsCategoriesOne,
        goodsCategoriesThree,
        goodsCategoriesTwo,
        dateEnd,
        dateBegin,
        queryType: 1
      };
    }
  }
};
</script>
<style lang="scss" scoped>
@import './common.scss';
.single-version-page{
  padding: 0 20px;
}
</style>
